<template>
	<view class="con">
		<view class="nav">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="searchbox" @click="tosearch">
				输入搜索关键字
			</view>
		</view>
		<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" v-for="(item,index) in bannerList">
			<swiper-item>
				<view class="swiper-item">
					<image :src="item.image.file_path" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="box">
			<view class="b-item" @click="toms">
				<image src="../../static/ms.png"></image>
				<view>徕吧秒杀</view>
			</view>
			<view class="b-item" v-for="(item,index) in iconList" @click="navTo(item.id)">
				<image :src="item.image.file_path"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view class="goodsbox">
			<view class="goodsitem" v-for="(item,index) in productList" @click="nav(item.id)">
				<image :src="item.image.file_path" mode="aspectFill" class="goodsimg"></image>
				<view class="t_box">
					<view class="gname">{{item.goods_name}}</view>
					<view class="gp">{{item.goods_price}}积分</view>
				</view>
			</view>
			
		</view>
	</view>

</template>

<script>
	import {shopIndex,getGoodsList} from "../../api/product.js"
	export default{
		data(){
			return{
				bannerList:[],//轮播图
				iconList:[],//icon分类列表
				productList:[] //商品列表
				
			}
		},
		onLoad() {
			this.getIcon()
		},
		methods:{
			// 获取商城信息接口
			getIcon(){
				this.post(shopIndex).then(res=>{
					console.log(res)
					this.bannerList=res.data.banner_list  //获取轮播图
					this.iconList=res.data.product_category_list  //获取分类列表
					this.productList=res.data.product_list  //获取商品列表
				})
			},
			//跳转商品列表页
			navTo(item){
				uni.navigateTo({
					url:'../search/searchShop?id='+item
				})
			},
			// 跳转商品详情
			nav(item){
				uni.navigateTo({
					url:"../product/product?id="+item
				})
			},
			tosearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			toms(){
				uni.navigateTo({
					url:"/pages/product/seckill"
				})
			}
		}
	}
</script>

<style>
	.gp {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #06923D;
		opacity: 1;
		margin-top: 20rpx;
		padding-left: 10rpx;
	}

	.gname {
		height: 66rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #333333;
		opacity: 1;
		padding-left: 10rpx;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.t_box {
		width: 340rpx;
		height: 150rpx;
	}

	.goodsimg {
		width: 340rpx;
		height: 330rpx;
	}

	.goodsitem {
		width: 340rpx;
		box-shadow: 12px 0px 17px rgba(4, 0, 0, 0.08);
		margin-bottom: 20rpx;
	}

	.goodsbox {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		flex-wrap: wrap;
	}

	.b-item>image {
		width: 60rpx;
		height: 60rpx;
	}

	

	.box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}
	.b-item {
		width: 20%;
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		text-align: center;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		line-height: 50rpx;
	}
	swiper {
		width: 690rpx;
		height: 277rpx;
		margin-left: 30rpx;
	}

	swiper-item {
		width: 690rpx;
		height: 277rpx;
	}

	.swiper-item>image {
		width: 690rpx;
		height: 277rpx;
	}

	.searchbox {
		width: 640rpx;
		height: 58rpx;
		background-color: #F6F6F6;
		border-radius: 30rpx;
		margin-left: 55rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		color: #666666;
		line-height: 58rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
